@import '../styles/global.less';
@import '../styles/var.less';

:global {
  #root {
    height: 100%;

    .codicon-symbol-text:before {
      content: '\eb11';
      width: 16px;
      height: 16px;
    }

    .codicon-symbol-function:before {
      content: '\ebb8';
      width: 16px;
      height: 16px;
      // background-image: url("");
    }

    .codicon-symbol-folder:before {
      content: '\ebb7';
      width: 16px;
      height: 16px;
      // background-image: url("");
    }

    .codicon-symbol-field:before {
      content: '\eb17';
      width: 16px;
      height: 16px;
      // background-image: url('');
    }
    .codicon-symbol-unit:before {
      content: '\ea70';
      width: 16px;
      height: 16px;
      // background-image: url('');
    }
    .codicon-symbol-property:before {
      content: '\eace';
      width: 16px;
      height: 16px;
      // background-image: url('');
    }
  }
}

.app {
  min-height: 100%;
}

.appContainer {
  min-height: 100%;
  background-color: var(--color-bg-base);
}

.loadingBox {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.github {
  font-size: 18px;
}

.restart {
  cursor: pointer;
  font-size: 18px;
  margin-top: 10px;

  &:hover {
    color: var(--color-primary);
  }
}

.hint {
  transform: translateY(120px);
}

.settingBox {
  position: absolute;
  top: 20px;
  right: 30px;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    i {
      color: var(--color-primary);
    }
  }

  i {
    font-size: 16px;
  }
}